<template>
    <div class="qilin-QilinTab">
        <el-tabs
            v-model="ownTabConfig.activeName"
            @tab-change="switchTab"
        >
            <template
                v-for="(item,index) in ownTabConfig.itemConfig"
                :key="item.name || '页签'+index "
            >
                <el-tab-pane
                    v-if="!item.isHide"
                    :label="item.label"
                    :name="item.name"
                >
                    <template v-slot:label>
                        <span>{{item.label}}</span>
                        <span v-if="item.showNumber">（{{item.number}}）</span>
                    </template>
                </el-tab-pane>
            </template>
        </el-tabs>
        <template v-if="(ownTabConfig.buttonConfig && ownTabConfig.buttonConfig.length > 0) && !ownTabConfig.hideButton">
            <template v-for="(item,index) in ownTabConfig.buttonConfig" :key="item.btnName || 'btn-'+index">
                <el-button
                    v-if="item.isHide ? false : item.isHideFn ? item.isHideFn(ownTabConfig.activeName) : true "
                    :type="item.btnType || 'primary'"
                    :size="item.btnSize || 'default'"
                    v-bind="item"
                    @click="item.btnClick && item.btnClick()"
                >{{ item.btnName || "按钮" }}</el-button>
            </template>
        </template>
    </div>
</template>

<script setup>

/*
    数据变量定义区域
*/


/*
    计算属性等代码区域
*/
// 接收来自父组件的传参
const propsValue=defineProps({
    tabConfig:{
        type:Object,
        default(){
            return {
                activeName:"",
                itemConfig:[
                    {
                        name:"",
                        label:"",
                        showNumber:false, //是否显示额外数字
                        number:0, //数字
                        isHide:false, //是否隐藏
                    }
                ],
                hideButton:false, //是否隐藏自定义按钮
                buttonConfig:[ //自定义按钮配置项
                    {
                        btnName:"按钮",
                        btnType:"primary",
                        btnSize:"small",
                        isHide:false, //是否隐藏自定义按钮，true表示隐藏
                        isHideFn:(activeName)=>{ //是否隐藏自定义按钮的函数，返回值为false表示隐藏，优先级低于isHide属性

                        },
                        btnClick:()=>{

                        }
                    }
                ]
            };
        }
    }
});
// 暴露父组件自定义方法
const emits=defineEmits(["update:tabConfig","switchTab"]);
// 组件自身的配置项
let ownTabConfig=computed({
    get(){
        return propsValue.tabConfig;
    },
    set(val){
        emits("update:tabConfig",val);
    }
});


/*
    逻辑脚本代码区域
*/
// 切换tab页签事件监听
const switchTab=(name)=>{
    emits("switchTab",name);
};


/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>
.qilin-QilinTab{
    position:relative;
    >.el-button{
        position:absolute;
        top:8%;
        right:0;
    }
}
:deep(.el-tabs .el-tabs__nav-wrap){
    padding:0;
}
</style>
